import React from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';

import 'gitalk/dist/gitalk.css'

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
// import Styles from './index.module.scss';
import Styles from './index.module.css';
// import HomepageFeatures from '@site/src/components/HomepageFeatures';
import indexImg from "@site/static/img/index.png";
import vueLogo from "@site/static/img/vue.png"
import reactLogo from "@site/static/img/react.png"
import webpackLogo from "@site/static/img/webpack.png"
import babelLogo from "@site/static/img/babel.png"
import tsLogo from "@site/static/img/ts.png"
import xrLogo from "@site/static/img/xr.png"
// import youLogo from "@site/static/img/you.png"
// import weiLogo from "@site/static/img/wei.png"
import xiaoLogo from "@site/static/img/xiao.png"
// import 'antd/dist/antd.css';
import '../css/antd.css';
// import systemStructure from "@site/static/img/systemStructure.png"

// function HomepageHeader() {
//   const { siteConfig } = useDocusaurusContext();
//   return (
//     <header className={clsx('hero hero--primary', styles.heroBanner)}>
//       <div className="container">
//         <h1 className="hero__title">{siteConfig.title}</h1>
//         <p className="hero__subtitle">{siteConfig.tagline}</p>
//         <div className={styles.buttons}>
//           <Link
//             className="button button--secondary button--lg"
//             to="/docs/intro">
//             Docusaurus Tutorial - 5min ⏱️
//           </Link>
//         </div>
//       </div>
//     </header>
//   );
// }


const frontList = [
  { title: "Vue", path: "/docs/vue/introduction", logo: vueLogo, content: true },
  { title: "React", path: "/docs/react/introduction", logo: reactLogo , content: true},
  { title: "Webpack", path: "/docs/webpack/introduction", logo: webpackLogo, content: true },
  { title: "Babel", path: "", logo: babelLogo , content: true},
  { title: "TypeScript", path: "/docs/ts/introduction", logo: tsLogo, content: true  },
  { title: "前端优化", path: "/docs/performanceAnalysis/introduction", logo: '', logoText: '优', content: true },
  // { title: "设计模式", path: "docs/designMode/introduction", logo: "", logoText: "设" },
  { title: "前端架构", path: "docs/frontEndArchitecture/introduction", logo: '', logoText: '架构', content: true },
  { title: "web3", path: "", logo: '',  logoText: 'web3' },
  { title: "js相关", path: "docs/category/css相关", logo: '', logoText: 'js',  content: true},
  // { title: "测试", path: "docs/测试/vue", logo: '', logoText: '测',  content: true},
  { title: "秘密内容", path: "docs/psw/introduction", logo: '', logoText: '禁',  content: true},
]

const backEndList = [
  { title: 'SpringBoot源码', path: '', logo: '', logoText: 'S' },
  { title: 'SQL', path: '', logo: '', logoText: 'Sql' },
  { title: 'Docker', path: '', logo: '', logoText: 'Doc' },
  { title: 'Redis', path: '', logo: '', logoText: 'Redis' },
  { title: '微服务', path: '', logo: '', logoText: '微' },
]

const baseList = [
  { title: '数据结构与算法', path: 'docs/dataStructureAlgorithm/introduction', logo: '', logoText: '数据', content: true },
  { title: '操作系统', path: 'docs/operatingSystem/introduction', logo: '', logoText: 'OS', content: true },
  { title: '计算机系统结构', path: 'docs/systemStructure/introduction', logo: '', logoText: '结构', content: true },
  { title: '数据库系统原理', path: 'docs/database/introduction', logo: '', logoText: '数据库', content: true },
  { title: '计算机网络原理', path: 'docs/network/introduction', logo: '', logoText: '网络', content: true },
  { title: '离散数学', path: 'docs/discrete/introduction', logo: '', logoText: '离散', content: true },
  // { title: '软件工程', path: '', logo: '', logoText: '工程' },
]

const coolList = [
  { title: '道德经', path: 'docs/道德经/introduction', logo: '',logoText: '道', content: true },
  { title: '心经', path: 'docs/xinjing/introduction', logo: '',logoText: '心', content: true },
  { title: '周易', path: 'docs/周易/introduction', logo: '',logoText: '易', content: true },
  { title: '古中文(文言文)', path: 'docs/古中文/introduction', logo: '',logoText: '文', content: true },
  { title: '道', path: 'docs/道教/introduction', logo: '',logoText: '道', content: true },
  { title: '风水', path: 'docs/风水/introduction', logo: '',logoText: '风', content: true },
  // { title: '冥想', path: '', logo: xiaoLogo },
  // { title: '瑜伽', path: '', logo: xiaoLogo },
  { title: '相', path: 'docs/相学/introduction', logo: '', logoText: '相', content: true },
  { title: '中医', path: 'docs/中医/introduction', content: true, logo: '',logoText:'医' },
  // { title: '站桩', path: 'docs/站桩/introduction', logo: '', logoText: '桩', content: true },
]

const otherList = [
  { title: '跑步注意事项', path: 'docs/run/introduction', logo: xiaoLogo ,content: true},
  // { title: 'engl', path: '', logo: xiaoLogo },
  // { title: 'language', path: 'docs/createLanguage/introduction', logo: '', logoText: 'language', },
  // { title: '觉得不错的书籍', path: '', logo: xiaoLogo },
  { title: '觉得不错的博客', path: 'docs/blogs/introduction', logo: xiaoLogo, content: true },
]
const isImgText = (item) => {
  if (item.logo.length > 0) {
    return <img src={item.logo}></img>;
  } else {
    return <div className={Styles.logoText}>{item.logoText}</div>
  }
}

export default function Home() {
  const { siteConfig } = useDocusaurusContext();
  return (<Layout><main>
    <header className={Styles.header} style={{backgroundColor:'#efefef'}}>
      <img src={indexImg} style={{ width: '100%' }}></img>
    </header>
    <nav className={Styles.nav}  style={{background:'white'}}>
      <section className={Styles.navsection}>
        <h4 className={Styles.navtitle}>前端相关</h4>
        <ul className={Styles.nav_ul}>
          {frontList.map(item => {
            return (<li key={item.title} className={item.content ? '' : Styles.mask}><Link to={item.path} className={Styles.nav_link}>
              {isImgText(item)}
              <div className={Styles.nav_link_box}>
                {item.title}
              </div>
            </Link></li>)
          })}

        </ul>
      </section>
      <section className={Styles.navsection}>
        <h4 className={Styles.navtitle}>后端相关</h4>
        <ul className={Styles.nav_ul}>
          {backEndList.map(item => {
            return (<li key={item.title} className={item.content ? '' : Styles.mask}><Link to={item.path} className={Styles.nav_link}>
              {isImgText(item)}
              <div className={Styles.nav_link_box}>
                {item.title}
              </div>
            </Link></li>)
          })}


        </ul>
      </section>
      <section className={Styles.navsection}>
        <h4 className={Styles.navtitle}>计算机基础</h4>
        <ul className={Styles.nav_ul}>
          {baseList.map(item => {
            return (<li key={item.title} className={item.content ? '' : Styles.mask}><Link to={item.path} className={Styles.nav_link}>
              {isImgText(item)}
              <div className={Styles.nav_link_box}>
                {item.title}
              </div>
            </Link></li>)
          })}
        </ul>
      </section>

      <section className={Styles.navsection}>
        <h4 className={Styles.navtitle}>有缘人</h4>
        <ul className={Styles.nav_ul}>
          {coolList.map(item => {
            return (<li key={item.title} className={item.content ? '' : Styles.mask}><Link to={item.path} className={Styles.nav_link}>
              {isImgText(item)}
              <div className={Styles.nav_link_box}>
                {item.title}
              </div>
            </Link></li>)
          })}
        </ul>
      </section>

      <section className={Styles.navsection}>
        <h4 className={Styles.navtitle}>不知道咋分类，就放下面吧</h4>
        <ul className={Styles.nav_ul}>
          {otherList.map(item => {
            return (<li key={item.title} className={item.content ? '' : Styles.mask}><Link to={item.path} className={Styles.nav_link}>
              {isImgText(item)}
              <div className={Styles.nav_link_box}>
                {item.title}
              </div>
            </Link></li>)
          })}

        </ul>
      </section>
    </nav>
  </main></Layout>);
}
